<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改经办人' : '添加经办人'"
    width="600px"
    :show-close="false"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-header">
        <span class="dialog-title">{{
          props.id ? "修改经办人" : "添加经办人"
        }}</span>
        <div class="dialog-actions">
          <el-button @click="handleCancel"> 取消 </el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="loading"
            style="background-color: #039691"
          >
            确定
          </el-button>
        </div>
      </div>
    </template>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="add-handler-form"
    >
      <!-- <el-form-item label="公司名称" prop="companyName">
        <el-input
          v-model="formData.companyName"
          placeholder="请输入公司名称"
          clearable
        />
      </el-form-item> -->

      <el-form-item label="真实姓名" prop="realName" required>
        <el-input
          v-model="formData.realName"
          placeholder="请输入真实姓名"
          clearable
        />
      </el-form-item>

      <el-form-item label="身份证号码" prop="idCard" required>
        <el-input
          v-model="formData.idCard"
          placeholder="请输入身份证号码"
          clearable
          maxlength="18"
        />
      </el-form-item>

      <el-form-item label="手机号码" prop="phone" required>
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号码"
          clearable
          maxlength="11"
        />
      </el-form-item>
    </el-form>

    <div class="form-tip">请填写真实身份信息,否则添加失败</div>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";

import {
  customerRechargeHandler,
  getCustomerRechargeHandlerDetail,
  editCustomerRechargeHandler,
} from "@/api/customer_handle/index.js";
// 对话框显示状态

const loading = ref(false);
const formRef = ref();

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:value", "on-success"]);
const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

// 表单数据
const formData = reactive({
  id: undefined,
  customerId: undefined,
  companyName: undefined,
  realName: undefined,
  idCard: undefined,
  phone: undefined,
  remark: undefined,
});

// 表单验证规则
const formRules = {
  realName: [
    { required: true, message: "请输入真实姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度在 2 到 10 个字符", trigger: "blur" },
  ],
  idCard: [
    { required: true, message: "请输入身份证号码", trigger: "blur" },
    {
      pattern:
        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/i,
      message: "请输入正确的身份证号码",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
};

// 重置表单
function resetForm() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    id: "",
    customerId: "",
    companyName: "",
    realName: "",
    idCard: "",
    phone: "",
    remark: "",
  });
  formRef.value?.resetFields();
}

// 关闭对话框
function handleClose() {
  visible.value = false;
  resetForm();
}

// 取消
function handleCancel() {
  handleClose();
}

// 提交表单
async function handleSubmit() {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;
    if (props.id) {
      await editCustomerRechargeHandler(formData);
      ElMessage.success("修改成功");
    } else {
      await customerRechargeHandler(formData);
      ElMessage.success("提交成功");
    }
    emits("on-success");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function getDetail() {
  if (props.id) {
    getCustomerRechargeHandlerDetail(props.id).then(({ data }) => {
      Object.assign(formData, {
        ...data,
      });
    });
  }
}
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e4e7ed;

  .dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

  .dialog-actions {
    display: flex;
    gap: 12px;
  }
}

.add-handler-form {
  margin-top: 20px;

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
  }

  :deep(.el-form-item.is-required .el-form-item__label::before) {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }

  :deep(.el-input__wrapper) {
    border-radius: 4px;
  }
}

.form-tip {
  margin-top: 16px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 0;
}

:deep(.el-dialog__body) {
  padding: 0 20px 20px;
}
</style>
